import { Component, ElementRef, Input, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes,
  // ...
} from '@angular/animations';

interface cfg {
  min?: number,
  max?: number,
  unit?: string,
  title?: string,
  color?: string,
  animation?: {}

}



@Component({
  selector: 'app-vs-chart',
  templateUrl: './vs-chart.component.html',
  styleUrls: ['./vs-chart.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'scale(1,1)', opacity: '1' })),
      // state('*', style({ transform: 'translateX(0)' })),
      // transition('* => void', [
      //   style({ transform: 'translateY(-30%)' }),
      //   animate(200)
      //   // animate('{{time}}')
      // ]),
      transition('* => *', [
        // animate(1000, style({ transform: 'translateX(150%)' }))
        // animate('{{time}}', style({ transform: 'translateY(-30%)' }))
        animate('{{time}}', keyframes([
          style({ transform: 'scale(1,1)', offset: 0 }),
          style({ opacity: '0.2', offset: 0 }),
          style({ transform: 'scale(1.2,1.2)', offset: 0.4 }),
          style({ opacity: '1', offset: 1 }),
          style({ transform: 'scale(1,1)', offset: 1 }),

        ]))
      ])
    ])
  ]
})
export class VsChartComponent implements OnInit {

  @Input() chartValue: number = 100;//"; // 组件配置参数，在标签上直接设置
  @Input('options') options: cfg = {};; // 组件配置参数，在标签上直接设置

  // 数值需要动态变化

  animationTime: string = '500ms'
  arcstr: string = ""
  arcangle: number = 20;
  transform: string = ""

  // 动态数据
  // chartValue:number=88;

  setval(v: number) {
    // if(this.animateDisalbe) this.animateValue=v
    if (this.animateDisalbe) this.drawChart()
  }

  // 配置数据
  arcstrBackgroud: string = ""
  arcBackgroundtransform: string = ""

  frontArc = {
    str: "",
    transform: "",
    stroke: "aqua",
    angle: 30,
    max: 100,
    min: 0,
    maxtransform: "",
    mintransform: "",
    titletransform: "",
    valuetransform: "",
    unittransform: "",
  }
  // frontArc 
  background = {
    str: "",
    transform: "",
    stroke: "#DDDDDD",
    angle: 0,
  }


  configer: cfg = {
    min: 0,
    max: 100,
    unit: "V",
    title: "Voltage",
    color: "#93C765",
    animation: { time: "800ms" }
  }


  viewBoxWidth = 1024
  viewBoxHeight = 1024
  padding = 60
  pathendX = 0
  pathendY = 0
  path = ""

  anglemin: number = 0
  anglemax: number = 100

  animate: boolean = true
  animateSpeed: number = 1.2
  animateCount: number = 1
  animateTemp: number = 0
  animateStart: number = 0
  animateStop: number = 0
  animateDelta: number = 0
  animateValue: number = 0;

  animateDisalbe: boolean = false;

  that = this

  constructor() { }

  ngOnInit(): void {
    this.configer = { ...this.configer, ...this.options }
    // console.log(this.configer)
    // console.log(this.chartValue)
    this.anglemin = this.animateValue = Number(this.configer.min)
    this.anglemax = Number(this.configer.max)

    // 格式化小数点
    if (this.configer.title == "Voltage") this.chartValue = Number(this.chartValue.toFixed(1))
    else this.chartValue = Math.floor(this.chartValue)

    // 限定取值边界
    if (this.chartValue < this.anglemin) this.chartValue = this.anglemin
    if (this.chartValue > this.anglemax) this.chartValue = this.anglemax

    this.drawChart()

    if (this.animate) {
      // let n=this.chartValue
      this.animateStop = this.chartValue
      this.animateStart = this.anglemin
      this.animateDelta = (this.chartValue - this.anglemin) / 100
      // console.log("animate");
      // this.path=""
      // this.animatePath()
      setTimeout(() => this.animatePath(), 1000)
    }
  }


  animatePath() {
    this.animateSpeed = -0.8;

    let speed = 0.9
    let dist = this.animateStop - this.animateStart
    dist *= 1.2
    let val = this.animateStart + dist * (1 - Math.pow(speed, this.animateCount));
    this.animateCount++
    // this.animateValue=val;

    // 允许动画文字 this.animateText
    if (this.animate) { //测试
      // 格式化小数点
      if (this.configer.title == "Voltage") this.animateValue = Number(val.toFixed(1))
      else this.animateValue = Math.floor(val)
    }


    // 设置终止条件
    if (this.animateCount > 200 || val / this.animateStop > 0.98) {
      val = this.animateStop
      this.animateValue = this.animateStop
      this.animateDisalbe = true
    }



    let value = val
    if (value > this.animateStop) value = this.animateStop
    // console.log(this.animateTemp)
    this.path = this.calculatePath(value)
    if (this.animateStart < this.animateStop && !this.animateDisalbe) {
      // let that=this
      setTimeout(() => this.animatePath(), 60)
    }

  }

  calculatePath(myvalue: number) {
    let rx = this.viewBoxWidth / 2 - this.padding; //x轴半径
    let ry = this.viewBoxHeight / 2 - this.padding; // y轴半径

    let val = myvalue;
    if (val > this.chartValue) val = this.chartValue

    // let percent= 1- (myvalue - this.anglemin)/(this.anglemax-this.anglemin)

    // if(percent>1) percent-=1
    let v = 1 - (val - this.anglemin) / (this.anglemax - this.anglemin)
    // console.log(myvalue +" " +v)
    let percent = v;
    // if(v>0.5) percent=v
    let angle = percent * 180
    let sinvalue = Math.sin(Math.PI / 180 * angle);
    let cosvalue = Math.cos(Math.PI / 180 * angle);

    let xx = cosvalue * rx;
    let yy = ry * ry - xx * xx * ((ry * ry) / (rx * rx))
    yy = Math.sqrt(yy);
    this.pathendX = xx;
    this.pathendY = -yy;
    let path = `M ${-rx} 0 A ${rx} ${ry} 0 0 1 ${this.pathendX} ${this.pathendY}`
    return path
  }

  randnum() {
    setTimeout(() => {
      // let start=(this.anglemin+0.001)*(Math.pow(this.animateSpeed,this.animateCount))
      if (this.animateTemp < this.chartValue) this.drawChart()
    }, 100)
  }

  drawChart() {

    let rx = this.viewBoxWidth / 2 - this.padding; //x轴半径
    let ry = this.viewBoxHeight / 2 - this.padding; // y轴半径
    let path = this.calculatePath(this.chartValue)
    this.frontArc.str = path
    this.path = path

    this.frontArc.transform = `translate(${this.viewBoxWidth / 2} ${this.viewBoxHeight / 2})`
    this.frontArc.mintransform = `translate(${this.padding} ${this.viewBoxHeight / 2 + 140})`
    this.frontArc.maxtransform = `translate(${this.viewBoxWidth - this.padding} ${this.viewBoxHeight / 2 + 140})`
    this.frontArc.titletransform = `translate(${this.viewBoxWidth / 2} ${this.viewBoxHeight / 2 + 250})`
    this.frontArc.valuetransform = `translate(${this.viewBoxWidth / 2 + 50} ${this.viewBoxHeight / 2 + 50})`
    this.background.str = `M ${-rx} 0 A ${rx} ${ry} 0 0 1 ${rx} 0`;
    this.background.transform = `translate(${this.viewBoxWidth / 2} ${this.viewBoxHeight / 2})`

    let offset = 60
    let num: string = ('' + String(this.chartValue));

    let cnt = num.length;
    if (num.indexOf(".") > 0) cnt = (cnt - 1) + 0.2

    //  this.frontArc.unittransform=`translate(${offset*cnt +80} 0)`
    this.transform = `translate(${this.viewBoxWidth / 2} ${this.viewBoxHeight / 2})`
    this.arcBackgroundtransform = `translate(${this.viewBoxWidth / 2} ${this.viewBoxHeight / 2})`

  }

}
